<template>
    <div>
        <a-card
            :title="data.title"
            :bordered="data.bordered"
        >
        <template #extra>
            <!-- 操作按钮 -->
            <div v-if="data.actions">
                <a-space>
                    <a-button
                        v-for="action in data.actions"
                        :key="action.text"
                        v-bind="action.props"
                        @click="handleAction(action)"
                    >
                    <template v-if="action.icon">
                        <component :is="iconComponents[action.icon]"></component>
                    </template>
                        {{ action.text }}
                    </a-button>                    
                </a-space>
            </div>
        </template>
            <div class="user-container">
                <div class="user-container_left">
                    <!-- 树形搜索组件 -->
                    <search-tree 
                        :tree="data.treeSearch"
                        :context="context"
                    ></search-tree>
                </div>
                <div class="user-container_right">
                    <div class="user-options">
                        <!-- 搜索组件 -->
                        <component
                            v-if="data.search"
                            :is="viewComponents[data.search.component]"
                            v-bind="data.search.props"
                            @search="context.handleSearch"
                            @reset="context.handleReset"
                            @selected="context.handleStatus"
                        />
                    </div>
                    <div class="user-table">
                        <!-- 表格组件 -->
                        <user-table
                            v-if="data.table"
                            :table="data.table"
                            :context="context"
                        ></user-table>
                    </div>
                </div>
            </div>
              <!-- 表单模态框组件 -->
               <user-form-modal
                    v-if="data.modal"
                    :form="data.modal"
                    :context="context"
               ></user-form-modal>
        </a-card>
    </div>
</template>

<script lang='ts' setup>
import { 
    CloudDownloadOutlined,
    PlusOutlined,
    SyncOutlined
 } from '@ant-design/icons-vue';
import { deleteUser, getUserList, searchUser, selectedOrganization, selectedStatus, } from '@/api/user/user';
import { message, Modal } from 'ant-design-vue';
import { defineProps, onMounted, reactive, ref } from 'vue';
import UserFormModal from '@/components/newComponents/UserFormModal.vue';
import UserTable from '@/components/newComponents/UserTable.vue';
import OptionView from '@/components/OptionView.vue';
import SearchTree from '@/components/SearchTree.vue';

const data = ref<any>()
const props = defineProps<{
    jsonData: any
}>()

props.jsonData.map((item: any) => {
    if(item.index === 'tableView'){
        data.value = item.content
    }
})

//其余组件映射
const viewComponents: Record<string, any>= {
    'OptionView': OptionView
}

//图标映射
const iconComponents: Record<string, any> = {
    'plus' : PlusOutlined,
    'reload': SyncOutlined,
    'download': CloudDownloadOutlined
}

//上下文对象，包含所有回调方法
const context = reactive<any>({
    //选择状态
    handleStatus: (values: string) => {
        data.value.table.pagination.current = 1
        if(values === '全部'){
            context.fetchUserList()
        }else{
            if(values === '开启'){
                selectedSta(true)
            }else{
                selectedSta(false)
            }
        }
    },
    //搜索用户
    handleSearch : async (params: any) => {
        data.value.table.loading = true
        try{
            const res = await searchUser({
                keywords: params,
                current: 1,
                pageSize: data.value.table.pagination.pageSize,
            })
            data.value.table.dataSource = res.data.list
            data.value.table.pagination.total = res.data.total
        }finally{
            data.value.table.loading = false
        }
    },
    //重置
    handleReset: () => {
        context.fetchUserList()
    },
    //搜索组织
    handleSelected: async (values: any) => {
        data.value.table.pagination.current = 1
        data.value.table.loading = true
        try{
            const res = await selectedOrganization({
            keywords: values,
            current: 1,
            pageSize: data.value.table.pagination.pageSize
            })
            data.value.table.dataSource = res.data.list
            data.value.table.pagination.total = res.data.total
        }finally{
            data.value.table.loading = false
        }
    },
    //显示编辑模态框
    showEditModal: (record: any) => {
        data.value.modal.visible = true
        data.value.modal.title = '编辑用户'
        data.value.modal.initialValues = { ...record }
    },
    //删除用户
    handleDelete: (record: any) => {
        Modal.confirm({
            title: '确认删除',
            content: `确定删除用户${record.name}吗？`,
            onOk: async () => {
                await deleteUser(record.id).then((res: any) => {
                    if(res.code === 200){
                        message.success('删除成功')
                        context.fetchUserList()
                    }else{
                        message.error('删除失败')
                    }
                })
            }
        })
    },
    //获取用户列表
    fetchUserList: async () => {
        data.value.table.loading = true
        try {
            const res = await getUserList({
                current: data.value.table.pagination.current,
                pageSize: data.value.table.pagination.pageSize,
            })
            data.value.table.dataSource = res.data.list
            data.value.table.pagination.total = res.data.total
        } catch (error) {
            console.log(error);
        }finally{
            data.value.table.loading = false
        }
    }
})

onMounted(() => {
    context.fetchUserList()
})

const handleAction = (action: any) => {
    if(action.text === '新增'){
        const res = action.click()
        data.value.modal.visible = true
        data.value.modal.title = '新增用户'
        data.value.modal.initialValues = { ...res.initialValues }        
    }else if(action.text === '导出'){
        action.click()
    }
}

const selectedSta = async (values: boolean) => {
  data.value.table.loading = true
  try{
    const res = await selectedStatus({
      keywords: values,
      current: 1,
      pageSize: data.value.table.pagination.pageSize
    })
    data.value.table.dataSource = res.data.list
    data.value.table.pagination.total = res.data.total
  }finally{
    data.value.table.loading = false
  }
}
</script>

<style scoped>
:deep(.ant-card-body){
    padding: 0;
}
.user-container{
  display: flex;
  margin: 10px;

}
.user-container_left{
  width: 180px; 
}
.user-container_right{
  max-width: 100%;
  width: 0;
  flex: 1;
}
.user-options{
  margin-left: 25px;
  margin-top: 10px;
  max-width: 100%;
}

.user-table{
  margin: 10px;
}
</style>